<template>
  <a-modal
      v-model:visible="mVisible"
      title="新建任务"
      :destroyOnClose="true"
      @cancel="onClose"
      @ok="okClick"
      :maskClosable="false"
      ok-text="确认"
      cancel-text="取消"
  >
    <div>
      <div class="option-container">
        <a-typography-text class="item-label">
          任务板
        </a-typography-text>
        <span class="colon-span">:</span>
        <el-select
            v-model="boardValue"
            filterable
            allow-create
            placeholder="目标任务板"
        >
          <el-option
              v-for="item in getBoardsOption"
              :key="item.value"
              :value="item.value"
          />
        </el-select>
        <a-typography-text
            style="line-height: 30px; font-size: 12px; margin-left: 6px"
        >
          选择或输入任务板
        </a-typography-text>
      </div>
      <div class="option-container">
        <span style="line-height: 32px; position: absolute; left: 15px; color: red">*</span>
        <a-typography-text class="item-label">
          任务描述
        </a-typography-text>
        <span class="colon-span">:</span>
        <a-textarea
            placeholder="请输入任务描述"
            :class="{'input-error' : isInputErr}"
            :auto-size="{ minRows: 2, maxRows: 6 }"
            v-model:value="inputValue"
        />
      </div>
      <div class="option-container">
        <a-typography-text class="item-label">
          优先级
        </a-typography-text>
        <span class="colon-span">:</span>
        <a-radio-group v-model:value="selectValue" button-style="solid">
          <a-radio-button value="1">一般</a-radio-button>
          <a-radio-button value="2">重要</a-radio-button>
          <a-radio-button value="3">紧急</a-radio-button>
        </a-radio-group>
      </div>
      <div class="option-container">
        <a-typography-text class="item-label">
          星标任务
        </a-typography-text>
        <span class="colon-span">:</span>
        <div style="align-self: center">
          <a-switch v-model:checked="switchChecked"/>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { ref } from "vue";
import { message } from 'ant-design-vue';
import taskCommend from "../task_manager/commend";
import { mapMutations } from "vuex";

export default {
  setup() {
    const inputValue = ref('');
    const boardValue = ref('');
    const selectValue = ref("1");
    const switchChecked = ref(false);
    const isInputErr = ref(false);
    const boardsOption = ref([]);
    const newBoard = ref('');
    return {
      inputValue,
      selectValue,
      switchChecked,
      isInputErr,
      boardValue,
      boardsOption,
      newBoard
    }
  },
  props: {
    board: String,
    mVisible: Boolean,
    closeModal: Function,
    boards: Array
  },
  mounted() {
    this.boardValue = this.board || "";
  },
  computed: {
    getBoardsOption() {
      return this.boards.map(board => {
        return {value: board};
      });
    }
  },
  methods: {
    ...mapMutations('panes', [
      'setActivePane'
    ]),
    sendCommendAndUpdate(input, flag) {
      taskCommend(input, flag);
      this.$store.dispatch('panes/getTaskData');
    },
    reset() {
      this.inputValue = '';
      this.boardValue = this.board;
      this.selectValue = '1';
      this.switchChecked = false;
      this.isInputErr = false;
    },
    onClose() {
      this.reset();
      this.closeModal();
    },
    onError() {
      this.isInputErr = true;
      message.error('请输入任务描述！', 1);
    },
    okClick() {
      if (this.inputValue === '') {
        this.onError()
        return;
      }
      const board = this.boardValue;
      const taskDes = this.inputValue;
      const star = this.switchChecked;
      const priority = this.selectValue;
      const input = [board, taskDes, priority, star];
      const flag = {task: true};
      this.setActivePane(board);
      this.sendCommendAndUpdate(input, flag);
      this.closeModal();
    }
  }
}
</script>

<style scoped>

</style>